<script setup>
import { inject, ref } from "vue";
import { videoCate, videoLst } from "@/services/video";
import tabbarView from "../components/tabbar.vue";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
const cateData = ref([{ name: "全部", id: "" }]);
const valuetabbar = ref(2);
const cates = ref("");
const current = ref(0);

const list = ref([]);
const status = ref("more");
const pages = ref({
  page: 1,
  limit: 20,
});
const loading = ref(true);

onLoad(() => {
  catefun();
});

onShow(() => {
  pages.value.page = 1;
  list.value = [];
  getlist();
});

//下拉触底
onReachBottom(() => {
  // 触发下拉触底时执行的操作
  getlist();
});

const getlist = async () => {
  try {
    status.value = "loading";
    let res = await videoLst({
      cates: cates.value,
      ...pages.value,
    });
    list.value = list.value.concat(res.data.list);
    loading.value = false;
    if (res.data.list.length < pages.value.limit) {
      status.value = "no-more";
      pages.value.page = 1;
    } else {
      status.value = "more";
    }
    pages.value.page++;
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

const catefun = async () => {
  try {
    let res = await videoCate();
    cateData.value = cateData.value.concat(res.data);
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};
const selecttabsfun = (item, index) => {
  current.value = index;
  pages.value.page = 1;
  cates.value = item.id;
  loading.value = true;
  list.value = [];
  getlist();
};

const godetails = (id) => {
  uni.navigateTo({
    url: `/pages/video_details/index?id=${id}`,
  });
};
</script>

<template>
  <view class="content">
    <view class="content-tabs">
      <up-tabs
        :list="cateData"
        lineWidth="30"
        lineColor="#F3498B"
        :activeStyle="{
          color: '#F3498B',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#606266',
        }"
        :current="current"
        @change="selecttabsfun"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"
      >
      </up-tabs>
    </view>
    <view v-if="list.length > 0">
      <view
        class="content-item"
        v-for="(item, index) in list"
        :key="index"
        @click="godetails(item.id)"
      >
        <view class="item-top"
          ><image :src="item.image" mode="aspectFill"
        /></view>
        <view class="item-footer">
          <view class="item-list">
            <view class="item-list-title">{{ item.title }}</view>
            <view class="item-list-text">
              <text>{{ item.update_time }}</text>
              <image src="/static/home/eyes.png" mode="aspectFill" />
              <text>{{ item.read_num }}</text>
              <image src="/static/home/good.png" mode="aspectFill" />
              <text>{{ item.like_num }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more
      color="#c6c5c3"
      :status="status"
      v-if="!loading && list.length > 0"
    />
  </view>

  <view class="nodeta" v-if="!loading && list.length <= 0">
    <image src="@/static/nodate/nodate.png" mode="widthFix" />
    <view> <text style="color: #8c8c8c;">~没有更多了~</text></view>
  </view>

  <!-- #ifdef MP-WEIXIN || WEB  -->
  <tabbarView :value="valuetabbar"></tabbarView>
  <!-- #endif -->
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
